<template>
  <div class="todo-detail" :class="{'has-bottom' : bottomApprovalShow}">
    <div class="scroll-box">
      <my-apply-info ref="applyInfo" :detailData="applyInfoDatail"></my-apply-info>
      <my-apply-process :processData="approvers" :detailData="applyInfoDatail"
      :class="{'not-bottom': !processShow}"></my-apply-process>
    </div>
    <!--  審批人底部操作欄  -->
    <my-bottom-approval v-if="bottomApprovalShow"></my-bottom-approval>
    <my-bottom-approval-check v-if="bottomWaitCheckShow"></my-bottom-approval-check>
    <my-bottom-approval-verify v-if="bottomApprovalVerifyShow"></my-bottom-approval-verify>
    <toast v-model="resStatusShow" class="toast-big" :time="3000" v-transfer-dom>{{resStatusText}}</toast>
    <toast v-model="toastShow" :text="toastText" type="text" class="toast-normal" :time="3000"></toast>
    <!-- 加载中 -->
    <loading class="loading-mask" :show="loadingShow" text="加载中..."></loading>
  </div>
</template>

<script>
  import { TransferDom, Toast, Loading } from 'vux';
  import ApplyInfo from '@/components/ApplyDetail/ApplyInfo.vue';
  import ApplyProcess from '@/components/ApplyDetail/ApplyProcess.vue';
  import BottomApproval from '@/components/Bottom/BottomApproval.vue';
  // import BottomApproval from '@/components/Bottom/BottomApproval.vue';
  import BottomApprovalVerify from '@/components/Bottom/BottomApprovalVerify.vue';
  import qs from 'qs';
  export default {
    name: 'ToDoDetail',
    data () {
      return {
        toastShow: false,       // 是否顯示提示框
        toastText: '',          // 提示框文字
        resStatusShow: false,   // 駁回、通過操作提示框
        resStatusText: '',      // 駁回、通過操作提示文字
        applyInfoDatail: {
          CreatedImage: '',
          CreatedNameCh: '',
          CreatedNameEn: '',
          CreatedStaffNo: '',
          CreatedTime: '',
          KeyId: '',
          TurndownRemark: '',
          Status: '',
          Type: '',
          Content: '',
          Copiers: [],
          CancelDateTime: '',
          ApplyNo: ''
        },
        approvers: [],
        processShow: false,
        bottomApprovalShow: false,
        bottomWaitCheckShow:false,
        bottomApprovalVerifyShow: false,
        loadingShow: true
      };
    },
    components: {
      Toast,
      Loading,
      'my-apply-info': ApplyInfo,
      'my-apply-process': ApplyProcess,
      'my-bottom-approval': BottomApproval,
      'my-bottom-approval-verify': BottomApprovalVerify,
      'my-bottom-approval-check': ()=>import('@/components/Bottom/BottomApprovalCheck.vue')
    },
    directives: {
      TransferDom
    },
    props: ['hasBottom'],
    mounted () {
      this.$parent.initPromise
      .then((res) => {
        this.getItemDetail();
        this.getApproverStatus();
      });
    },
    methods: {
      getItemDetail: function () {
        let itemDetailKeyId = JSON.parse(this.$route.query.item.replace(/[\\]/g, '')).KeyId;
        this.getApproverStatus();
        this.axios.post(`/Process/Get?keyId=${itemDetailKeyId}`)
        .then((res) => {


          // let str = {
          //   data: {
          //     KeyId: "21857c96-9115-4b49-be4f-c9f644c5356f",
          //     Type: 2,
          //     Status: 6,  //1.待审批 2.已审批 3.已驳回 4.   5.已取消 6.待查阅 7.已查阅
          //     Content: {
          //       projectName:"大茶饭",
          //       areaCode: "+86",
          //       clientName: "qad",
          //       company: "dsa",
          //       telephone: "13427786598",
          //       mobilePhone: "13427786598",
          //       faxTelephone: "",
          //       email: "",
          //       address: "13427786598",
          //       relatedProperties: "13427786598",
          //       PropertyID: "dsa",
          //       isOwner: false,
          //       isClient: true,
          //       transactionInfo: false,
          //       confidentialityReasons: "sda",
          //       remarks: "",
          //       ReApplyReason: null,
          //       EditApplyReason: null,
          //       EditApplyDateReason: null,
          //       Files: ["附件一.png","附件二.png"],
          //     },
          //     TurndownRemark: null,
          //     CreatedStaffNo: "10829",
          //     CreatedNameCh: "黎偉杰",
          //     CreatedNameEn: "Adam Lai",
          //     CreatedImage:
          //       "http://wework.qpic.cn/bizmail/eiaCeiaEYmBHia5B8nI5s0asbFAibibln2WVibntW0eQK8Z9Ge5CvIYaibCiag/0",
          //     CreatedTime: "2020-08-06T10:12:37.047",
          //     Approvers: [
          //       {
          //         Image:
          //           "http://wework.qpic.cn/bizmail/zicFlZMVCFum5yBrlFxrztdSmrib9EX3VLjBAylqrTf7ia3h01zUic4tVQ/0",
          //         StaffNo: "10463",
          //         NameCh: "李肇成",
          //         NameEn: "Jack Lei",
          //         Status: 6, //1.待审批 2.已通过 3.已驳回 4.已关闭 5.已取消 6.待查阅 7.已查阅
          //         Remark: null,
          //         TurndownRemark: null,
          //         ModifiedTime: null,
          //         Verify: false,
          //       },
          //       {
          //         Image: null,
          //         StaffNo: "6666888",
          //         NameCh: "虚拟账号",
          //         NameEn: "TestCode",
          //         Status: 1, //1.待审批 2.已通过 3.已驳回 4.已关闭 5.已取消 6.待查阅 7.已查阅
          //         Remark: null,
          //         TurndownRemark: null,
          //         ModifiedTime: null,
          //         Verify: false,
          //       },
          //     ],
          //     Copiers: [
          //       {
          //         StaffNo: "10822",
          //         NameCh: "蔡芳芳",
          //         NameEn: "Toby Choi",
          //         Image:
          //           "http://wework.qpic.cn/bizmail/iar1EkqotXEzkEPh8Y2fwibvQEC5iapgRfa1EfjD68iawXXnhqeSBdfOfA/0",
          //       },
          //     ],
          //     CancelDateTime: null,
          //     IsReApply: false,
          //     ApplyNo: "TRA_M.U202008012",
          //   },
          //   IsSuccess: true,
          //   ExMessage: null,
          //   CreatedTime: "2020-08-10T12:10:38.0017886+08:00",
          // };
          // res.data = str;


          this.loadingShow = false;
          if (res.data.IsSuccess === true) {
            for (let prop in this.applyInfoDatail) {
              this.applyInfoDatail[prop] = res.data.data[prop];
            }
            this.approvers = res.data.data.Approvers;
            for(var item of res.data.data.Approvers){
              if(item.Content){
                let content = JSON.parse(item.Content)
                item.Content = content
              }
            }
            this.$refs.applyInfo.parseParams();
          } else {
            this.toastText = res.data.ExMessage;
            this.toastShow = true;
          }
        })
        .catch((err) => {
          this.loadingShow = false;
          this.toastText = `加载失败，错误信息${err}`;
          this.toastShow = true;
        });
      },
      getApproverStatus: function () {
        let itemDetailKeyId = JSON.parse(this.$route.query.item.replace(/[\\]/g, '')).KeyId;
        let userInfo = this.getUserInfo();
        let postData = {
          data: {
            KeyId: itemDetailKeyId,
            StaffNo: userInfo.StaffNo,
            PageIndex: 1,
            PageSize: 1
          }
        };
        this.axios.post('/Process/QueryByApprover', qs.stringify(postData))
        .then((res) => {
          if (res.data.IsSuccess === true) {
            // res.data.data[0].ApproverStatus = 6
            console.log('审批页面', res.data.data[0]);
            this.processShow = res.data.data[0].ApproverStatus !== 1 && res.data.data[0].ApproverStatus !== 6;
            this.bottomApprovalShow = res.data.data[0].ApproverStatus === 1 && userInfo.Verify === false;
            this.bottomWaitCheckShow = res.data.data[0].ApproverStatus === 6 && userInfo.Verify === false;
            this.bottomApprovalVerifyShow = res.data.data[0].ApproverStatus === 1 && userInfo.Verify === true;
          } else {
            this.toastText = res.data.ExMessage;
            this.toastShow = true;
          }
        })
        .catch((err) => {
          this.loadingShow = false;
          this.toastText = `加载失败，错误消息：${err}`;
          this.toastShow = true;
        });
      }
    },
    beforeRouteLeave(to, from, next) {
      if(to.name === "ToDoList"){
        to.meta.keepAlive = true
      }
      this.$destroy()
      next()
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .todo-detail{
    padding-top: 44px;
    margin-bottom: getRem(150);
    .has-bottom{
      margin-bottom: getRem(98);
    }
    .not-bottom{
      margin-bottom: getRem(150);
    }
  }
</style>
